<!DOCTYPE html>
<html>
<head>
  <title>Remote Image</title>

  <script type="text/javascript" src='/lib/jquery.js'></script>
  <script type="text/javascript" src='/src/jquery.adaptive-backgrounds.js'></script>
  <script type="text/javascript">

  $(document).ready(function(){
    $.adaptiveBackground.run()
  });

  </script>

  <style type="text/css">

    body{
      max-width: 500px;
      margin: 0 auto;
    }

    .img-wrap{
      height: 500px;
      width: 500px;
      position: absolute;
      top: 50%; left: 50%;
      text-align: center;
      -webkit-transform: translateY(-50%) translateX(-50%);
    }

    .img-wrap img{
      width: 100%;
    }

  </style>

</head>
<body>

  <div class='img-wrap'>
      <img id="img" src="http://www.vangoghgallery.com/catalog/image/0612/Starry-Night.jpg" data-adaptive-background data-ab-parent='body'>
  </div>

</body>
</html>
